<template>
  <view class="warp" :style="themeStyleVar">
    <view :style="{'padding-top':`${navBarConf.titleBarHeight + navBarConf.statusBarHeight}px`}">
      <view class="content">

        <view class="content-item martb">
          <view class="content-item__title">
            <span>大写金额:</span>
            <!-- #ifndef H5 -->
            <span class="copy" @click="copy">复制</span>
            <!-- #endif -->
          </view>
          <textarea v-model="result" disabled class="content-item__result"></textarea>
        </view>

        <view class="content-item martb">
          <view class="content-item__title">小写金额:</view>
          <input v-model="money" type="digit" class="tag-input" placeholder="请输入小写金额" @input="replaceMoney">
        </view>

      </view>

      <view class="knowledge">
        <view class="knowledge-item martb">
          <p class="knowledge-item__title"><i class="iconfont icon-zhishiku"></i> 相关知识</p>
          <view class="knowledge-item__content">
            <p class="tag-p">大写数字的使用始于明朝。朱元璋因为当时的一件重大贪污案“郭桓案”而发布法令,其中明确要求记账的数字必须由“一、二、三、四、五、六、七、八、九、十、百、千”改为“壹、贰、叁、肆、伍、陆、柒、捌、玖、拾、佰(陌)、仟(阡)”等复杂的汉字,用以增加涂改帐册的难度。后来“陌”和“阡”被改写成“佰、仟”,并一直使用到现在。</p>
            <p class="tag-p">人类最早用来计数的工具是手指和脚趾,但它们只能表示20以内的数字。当数目很多时,大多数的原始人就用小石子来记数。渐渐地,人们又发明了打绳结来记数的方法,或者在兽皮、树木、石头上刻画记数。中国古代是用木、竹或骨头制成的小棍来记数,称为算筹。这些记数方法和记数符号慢慢转变成了最早的数字符号(数码)。如今,世界各国都使用阿拉伯数字为标准数字。</p>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      money: ''
    }
  },
  computed: {
    navBarConf() { return this.$store.getters.getNavBarConf }, // 获取设备头部安全区和标题高度
    themeStyleVar() { return this.$store.getters.getThemeStyleVar }, // 当前主题色卡变量
    result() { return this.convertCurrency(this.money) }
  },
  onLoad(option) {
      // #ifdef MP-WEIXIN
      wx.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      })
      // #endif
  },
  // #ifdef MP-WEIXIN
  onShareAppMessage(res) {
      if (res.from === 'button') {// 来自页面内分享按钮
        console.log(res.target)
      }
      return {
        title: '给您分享个工具人民币大写转换工具',
        path: '/pages/tools/rmbcapital'
      }
  },
  // #endif
  methods: {
    // 复制
    copy() {
      uni.setClipboardData({
        data: this.result,
        success: () => {
          uni.showToast({
            title: '复制成功～',
            icon: 'none'
          })
        }
      })
    },
    // 格式化金额
    replaceMoney(event) {
      const value = event.target.value
      const replaceValue = value.replace(/[^0-9.]+/g, '')
      if (event.detail.value !== replaceValue) {
        // 修改当前value
        event.detail.value = replaceValue
        setTimeout(() => {
          this.money = replaceValue
        }, 10)
      }
    },
    convertCurrency(currencyDigits) {
      // Constants:
      var MAXIMUM_NUMBER = 99999999999.99
      // Predefine the radix characters and currency symbols for output:
      var CN_ZERO = '零'
      var CN_ONE = '壹'
      var CN_TWO = '贰'
      var CN_THREE = '叁'
      var CN_FOUR = '肆'
      var CN_FIVE = '伍'
      var CN_SIX = '陆'
      var CN_SEVEN = '柒'
      var CN_EIGHT = '捌'
      var CN_NINE = '玖'
      var CN_TEN = '拾'
      var CN_HUNDRED = '佰'
      var CN_THOUSAND = '仟'
      var CN_TEN_THOUSAND = '万'
      var CN_HUNDRED_MILLION = '亿'
      var CN_SYMBOL = '人民币'
      var CN_DOLLAR = '元'
      var CN_TEN_CENT = '角'
      var CN_CENT = '分'
      var CN_INTEGER = '整'

      // Variables:
      var integral // Represent integral part of digit number.
      var decimal // Represent decimal part of digit number.
      var outputCharacters // The output result.
      var parts
      var digits, radices, bigRadices, decimals
      var zeroCount
      var i, p, d
      var quotient, modulus

      // Validate input string:
      currencyDigits = currencyDigits.toString()
      if (currencyDigits === '') {
        return ''
      }
      if (currencyDigits.match(/[^,.\d]/) != null) {
        return '小写金额含有无效字符～'
      }
      if ((currencyDigits).match(/^((\d{1,3}(,\d{3})*(.((\d{3},)*\d{1,3}))?)|(\d+(.\d+)?))$/) == null) {
        return '小写金额的格式不正确～'
      }

      // Normalize the format of input digits:
      currencyDigits = currencyDigits.replace(/,/g, '') // Remove comma delimiters.
      currencyDigits = currencyDigits.replace(/^0+/, '') // Trim zeros at the beginning.
      // Assert the number is not greater than the maximum number.
      if (Number(currencyDigits) > MAXIMUM_NUMBER) {
        return '金额过大！超过1000亿元无法转换～'
      }

      // Process the coversion from currency digits to characters:
      // Separate integral and decimal parts before processing coversion:
      parts = currencyDigits.split('.')
      if (parts.length > 1) {
        integral = parts[0]
        decimal = parts[1]
        // Cut down redundant decimal digits that are after the second.
        decimal = decimal.substr(0, 2)
      } else {
        integral = parts[0]
        decimal = ''
      }
      // Prepare the characters corresponding to the digits:
      digits = [CN_ZERO, CN_ONE, CN_TWO, CN_THREE, CN_FOUR, CN_FIVE, CN_SIX, CN_SEVEN, CN_EIGHT, CN_NINE]
      radices = ['', CN_TEN, CN_HUNDRED, CN_THOUSAND]
      bigRadices = ['', CN_TEN_THOUSAND, CN_HUNDRED_MILLION]
      decimals = [CN_TEN_CENT, CN_CENT]
      // Start processing:
      outputCharacters = ''
      // Process integral part if it is larger than 0:
      if (Number(integral) > 0) {
        zeroCount = 0
        for (i = 0; i < integral.length; i++) {
          p = integral.length - i - 1
          d = integral.substr(i, 1)
          quotient = p / 4
          modulus = p % 4
          if (+d === 0) {
            zeroCount++
          } else {
            if (zeroCount > 0) {
              outputCharacters += digits[0]
            }
            zeroCount = 0
            outputCharacters += digits[Number(d)] + radices[modulus]
          }
          if (+modulus === 0 && zeroCount < 4) {
            outputCharacters += bigRadices[quotient]
            zeroCount = 0
          }
        }
        outputCharacters += CN_DOLLAR
      }
      // Process decimal part if there is:
      if (decimal !== '') {
        for (i = 0; i < decimal.length; i++) {
          d = decimal.substr(i, 1)
          if (+d !== 0) {
            outputCharacters += digits[Number(d)] + decimals[i]
          }
        }
      }
      // Confirm and return the final output string:
      if (outputCharacters === '') {
        outputCharacters = CN_ZERO + CN_DOLLAR
      }
      if (decimal === '') {
        outputCharacters += CN_INTEGER
      }
      outputCharacters = CN_SYMBOL + outputCharacters
      return outputCharacters
    }
  }
}
</script>

<style lang="scss" scoped>
  .warp {
    background-color: #FFF;
    min-height: 100vh
  }

  .content {
    @include flex-center();
    flex-flow: column;
    padding: 24rpx;
    border-top: 20rpx solid #F7F7F7;
    box-sizing: border-box;
    font-size: $uni-font-size-base;

    .content-item {
      width: 100%;
      background-color: #FFF;
      border-radius: 16rpx;
      padding: 24rpx;
      box-sizing: border-box;

      &__title {
        margin: 20rpx 0 30rpx;
        display: flex;
        justify-content: space-between;

        .copy {
          color: var(--global-color-100);
        }
      }

      .tag-input {
        margin: 0 auto;
        width: 86%;
        padding: 5rpx 10rpx;
        border-radius: 8rpx;
        font-size: 38rpx;
        height: 76rpx;
        line-height: 38rpx;
        color: #2C405A;
        border: 1px solid var(--global-color-100);
        background-color: #FCFCFC;
      }

      &__result {
        margin: 0 auto;
        width: 86%;
        height: 96rpx;
        font-size: $uni-font-size-base;
        line-height: 48rpx;
        padding: 20rpx 20rpx;
        border-radius: 8rpx;
        background-color: var(--global-color-400);
        border: 1px dashed var(--global-color-100);
        color: $uni-color-title;
      }
    }

    .btns {
      @include flex-center();
      flex-flow: column;
      margin-top: 150rpx;
      width: 100%;

      .btn-item {
        @include flex-center();
        width: 86%;
        height: 80rpx;
        color: #FFF;
        border-radius: 80rpx;
        background-color: var(--global-color-100);
      }
    }
  }

  .knowledge {
    padding: 0 24rpx;
    box-sizing: border-box;
    font-size: $uni-font-size-base;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));

    .knowledge-item {
      padding-top: 50rpx;

      &__title {
        font-size: $uni-font-size-lg;
        color: $uni-color-title;
        padding: 10rpx 0;
        display: flex;
        align-items: center;

        .icon-zhishiku {
          font-size: 40rpx;
          color: var(--global-color-100);
          margin-right: 20rpx;
        }
      }

      &__content {
        font-size: $uni-font-size-sm;
        color: $uni-color-paragraph;
        line-height: 42rpx;

        .tag-p {
          text-indent: $uni-font-size-sm * 2;
          @extend .martb;
        }
      }
    }
  }

  .martb {
    margin: 20rpx 0;
  }
</style>
